import { MenuOutlined, VerticalAlignTopOutlined, ReadOutlined } from '@ant-design/icons'
import { truthy } from '@gnlab/utils'
import { Actionable } from '@/desktop/components'
import BeautyMenu from '@/desktop/components/BeautyMenu'
import type { MenuItem } from '@/desktop/components/BeautyMenu'
import services from '@/services'
import './menu.module.less'

export function Menu(props: { items: (MenuItem | false | null | undefined)[] }) {
  const items = props.items.filter(v => truthy(v)) as MenuItem[]
  if (!items.length) return null

  return <Actionable>
    <BeautyMenu items={items}>
      <div styleName="menu">
        <MenuOutlined />
      </div>
    </BeautyMenu>
  </Actionable>
}

export const menuItems = {
  top(contactId: string, isTop: boolean): MenuItem {
    return isTop
      ? {
          icon: <VerticalAlignTopOutlined />,
          title: '取消置顶',
          onClick: () => void services.contacts.tops.cancel(contactId),
        }
      : {
          icon: <VerticalAlignTopOutlined />,
          title: '置顶',
          onClick: () => void services.contacts.tops.mark(contactId),
        }
  },
  markUnread(contactId: string, currentUnread: number): MenuItem | null {
    return currentUnread === 0
      ? {
          icon: <ReadOutlined />,
          title: '标记为未读',
          onClick: () => void services.chat.metas.markUnread(contactId),
        }
      : null
  },
}
